<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#bigbox{
				height: 99%;
				width: 99%;
				background: black;
				opacity: 0.3;
				position: absolute;
				z-index: 99;
			}
			#box{
				background: white;
				width: 30%;
				height: 25%;
				min-width: 400px;
				min-height: 200px;
				position: absolute;
				top: 30%;
				left: 33%;
				border-radius: 5%;
				opacity: 1;
				z-index: 100;
				overflow: hidden;
				border: 1px solid #CCCCCC;
			}
			#box .top_frame{
				height: 40px;
				background: dodgerblue;
				line-height:40px;
				padding-left: 1em;
				
			}
			#box .top_frame span{
				display: inline-block;
				margin-left:65% ;
				font-size: 25px;
				height: 30px;
				line-height: 30px;
				width: 40px;
				border-radius: 12.5%;
				text-align: center;
				background: white;
				cursor: pointer;
				font-weight: bold;
			}
			#box .messages{
				height: 120px;
				line-height: 120px;
				padding-left: 0.75em;
				
			}
			#box .box_btn{
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: right;
			}
			#confirm,#cancel{
				width: 60px;
				height: 25px;
				font-size: 18px;
				cursor: pointer;
				border-radius: 12.5%;
			}
			#confirm{
				background: orangered;
			}
			#cancel{
				margin-right: 16px;
			}
		</style>
		<script type="text/javascript" src="javascript/jquery-2.1.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#top_cancel,#cancel').click(function(){
					$('#box,#bigbox').css('display','none');
				});
				$('#confirm').click(function(){
					return true;
				});
			});
		</script>
	</head>
	<body>
		<div id="bigbox"></div>
		<div id="box">
				<p class="top_frame">
					对话信息
					<span id="top_cancel">
						×
					</span>
				</p>
				<p class="messages">
				</p>
				<p class="box_btn">
					<button type="button" id="confirm">确认</button>
					<button type="button" id="cancel">取消</button>
				</p>
		</div>
	</body>
</html>
